<template>
    <h2>hover</h2>
    <div class="tw:w-16 tw:h-8 tw:bg-black tw:hover:bg-red-500"></div>
    <h2>focus</h2>
    <input type="text" class="tw:border-yellow-500 tw:focus:border-green-500">
    <h2>focus-within</h2>
    <div class="tw:focus-within:shadow-lg">
        <input type="text">
    </div>
    <h2>focus-visible</h2>
    <button class="tw:focus-visible:outline-2">提交</button>
    <h2>active</h2>
    <button class="tw:bg-blue-300 tw:active:bg-blue-600 tw:h-8 tw:w-16 tw:rounded"></button>
    <h2>visited</h2>
    <a href="https://www.baidu.com" class="tw:visited:text-yellow-500" target="_blank">百度</a>
    <h2>target</h2>
    <a href="#about">链接</a>
    <div id="about" class="tw:target:shadow-lg">目标区域</div>
    <h2>first</h2>
    <ul>
        <li v-for='i in 3' :key=i class="tw:py-4 tw:first:bg-yellow-100">{{ i }}</li>
    </ul>
    <h2>last</h2>
    <ul>
        <li v-for="i in 3" :key="i" class="tw:py-4 tw:last:bg-yellow-100">{{ i }}</li>
    </ul>
    <h2>only</h2>
    <ul>
        <li class="tw:only:bg-yellow-100">1</li>
    </ul>
    <br>
    <ul>
        <li class="tw:only:bg-yellow-100">1</li>
        <li class="tw:only:bg-yellow-100">2</li>
    </ul>
    <h2>odd</h2>
    <ul>
        <li class="tw:odd:bg-gray-300">01</li>
        <li class="tw:odd:bg-gray-300">02</li>
        <li class="tw:odd:bg-gray-300">03</li>
        <li class="tw:odd:bg-gray-300">04</li>
        <li class="tw:odd:bg-gray-300">05</li>
    </ul>
    <h2>even</h2>
    <ul>
        <li class="tw:even:bg-gray-300">01</li>
        <li class="tw:even:bg-gray-300">02</li>
        <li class="tw:even:bg-gray-300">03</li>
        <li class="tw:even:bg-gray-300">04</li>
        <li class="tw:even:bg-gray-300">05</li>
    </ul>
    <h2>first-of-type</h2>
    <div>
        <p class="tw:first-of-type:bg-green-300">测试文本</p>
        <a href="#" class="tw:first-of-type:bg-yellow-300">测试链接</a>
        <p class="tw:first-of-type:bg-green-300">测试文本</p>
        <a href="#" class="tw:first-of-type:bg-yellow-300">测试链接</a>
    </div>
    <h2>last-of-type</h2>
    <div>
        <p class="tw:last-of-type:bg-green-300">测试文本</p>
        <a href="#" class="tw:last-of-type:bg-yellow-300">测试链接</a>
        <p class="tw:last-of-type:bg-green-300">测试文本</p>
        <a href="#" class="tw:last-of-type:bg-yellow-300">测试链接</a>
    </div>
    <h2>only-of-type</h2>
    <div>
        <p class="tw:only-of-type:bg-green-300">测试文本</p>
        <p class="tw:only-of-type:bg-green-300">测试文本</p>
        <a href="#" class="tw:only-of-type:bg-yellow-300">测试链接</a>
    </div>
    <h2>nth</h2>
    <ul>
        <li v-for="i in 6" :key="i" class="tw:nth-3:bg-yellow-300 tw:nth-[2n]:bg-green-300">{{ i }}</li>
    </ul>
    <h2>nth-last</h2>
    <ul>
        <li v-for="i in 6" :key="i" class="tw:nth-last-3:bg-yellow-300 tw:nth-last-[2n]:bg-green-300">{{ i }}</li>
    </ul>
    <h2>nth-of-type</h2>
    <div>
        <p class="tw:nth-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-of-type-2:bg-yellow-300">测试链接</a>
        <p class="tw:nth-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-of-type-2:bg-yellow-300">测试链接</a>
        <p class="tw:nth-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-of-type-2:bg-yellow-300">测试链接</a>
        <p class="tw:nth-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-of-type-2:bg-yellow-300">测试链接</a>
    </div>
    <h2>nth-last-of-type</h2>
    <div>
        <p class="tw:nth-last-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-last-of-type-2:bg-yellow-300">测试链接</a>
        <p class="tw:nth-last-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-last-of-type-2:bg-yellow-300">测试链接</a>
        <p class="tw:nth-last-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-last-of-type-2:bg-yellow-300">测试链接</a>
        <p class="tw:nth-last-of-type-2:bg-green-300">测试文本</p>
        <a href="#" class="tw:nth-last-of-type-2:bg-yellow-300">测试链接</a>
    </div>
    <h2>empty</h2>
    <ul>
        <li class="tw:empty:hidden">01</li>
        <li class="tw:empty:hidden">02</li>
        <li class="tw:empty:hidden"></li>
        <li class="tw:empty:hidden">04</li>
        <li class="tw:empty:hidden">05</li>
    </ul>
    <h2>disabled enabled</h2>
    <button @click="() => 启用=!启用">{{ 启用 ? '禁用' : '启用' }}</button>
    <input type="text" :disabled="禁用" class="tw:enabled:bg-green-300 tw:disabled:bg-gray-300">
    <h2>checked</h2>
    <input type="checkbox" :checked="启用" class="tw:checked:accent-yellow-500">
    <h2>interminate</h2>
    <input type="checkbox" class="appearance-none indeterminate:bg-gray-300" />
    <div class="tw:w-160 tw:h-16 tw:rounded tw:bg-linear-60 tw:from-indigo-500 tw:from-15% tw:via-red-500 tw:via-45% tw:to-yellow-500 tw:to-90%"></div>
    <div class="tw:size-60 tw:rounded-full tw:bg-radial-[at_30%_30%] tw:from-indigo-500 tw:from-15% tw:via-red-500 tw:via-45% tw:to-yellow-500 tw:to-90%"></div>
</template>

<script setup="">
    import {ref as 响应, computed as 计算} from 'vue'
    
    const 启用 = 响应(true)
    const 禁用 = 计算(() => !启用.value)
</script>